import React from 'react'
import Tabs from 'react-simpletabs'
import ReactDOM from 'react-dom'
import * as PropertyUserAction  from '../../actions/PropertyUserAction';
import { connect }  from 'react-redux';

import _ from 'lodash'

import Paging from '../Paging'

import BackgroundSettingTools from './BackgroundSettingTools'
import BackgroundSettingList from './BackgroundSettingList'
import BackgroundSettingEdit from './BackgroundSettingEdit'
import BackgroundSettingCreate from './BackgroundSettingCreate'
import BackgroundSettingProperty from './BackgroundSettingProperty'
import BackgroundSettingRole from './BackgroundSettingRole'
import BackgroundSettingUserRole from './BackgroundSettingUserRole'

class BackgroundSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      search: ''
    }
  }

  componentDidMount() {
    var self = this;
    this.$modalEdit = $(ReactDOM.findDOMNode(this.refs.BackgroundPropertySettingEdit))
    this.$modalProperty = $(ReactDOM.findDOMNode(this.refs.BackgroundSettingProperty))
    this.$modalRole = $(ReactDOM.findDOMNode(this.refs.BackgroundPropertySettingRole))
    this.$modalCreate = $(ReactDOM.findDOMNode(this.refs.BackgroundPropertySettingCreate))
    this.$modalUserRole = $(ReactDOM.findDOMNode(this.refs.BackgroundSettingUserRole))

    this.props.dispatch(
      PropertyUserAction.loadCorpDataAsync({

      })
    )
  }

  componentDidUpdate() {
    // console.log(this.props.data)
  }

  onCreateClick() {
    this.setState({
      activeData: {}
    })
    this.$modalCreate.modal("show")
  }

  onDataCreate(data) {
    this.props.dispatch(
      PropertyUserAction.createCorpDataAsync(data)
    )
    this.$modalCreate.modal("hide");
  }

  onSelectClick(data){
    if (this.state.activeData) {
      var activeData = this.state.activeData;
      activeData.WorkingProperty = data;
      activeData.working_property_id = data.id
      this.setState({
        activeData: activeData
      })
    }
    this.$modalProperty.modal("hide");
  }


  onSelectRoleClick(data) {
    if (this.state.activeData) {
      var activeData = this.state.activeData;
      if (!activeData.sys_role_user) {
        activeData.sys_role_user = []
      }else {
        for (var i = 0; i < activeData.sys_role_user.length; i++) {
          var sys_role_user = activeData.sys_role_user[i];
          if (sys_role_user.role && sys_role_user.role.id == data.id) {
            this.$modalRole.modal("hide");
            return;
          }
        }
      }
      activeData.sys_role_user.push({
        role_id: data.id,
        role: data
      })
      if (activeData.id) {
        this.props.dispatch(
          PropertyUserAction.addSysRoleUserAsync({
            sys_user_id: activeData.id,
            role_id: data.id
          })
        )
      }
      this.setState({
        activeData: activeData
      })
      this.$modalRole.modal("hide");
    }
  }

  onDeleteSysRoleClick(data) {
    var activeData = this.state.activeData;
    // console.log(data)
    if (activeData.sys_role_user) {

      _.remove(activeData.sys_role_user,function(roleUser){
        return data.role.id == roleUser.role.id
      })

      this.props.dispatch(
        PropertyUserAction.deleteSysRoleUserAsync({
          sys_user_id: activeData.id,
          role_id: data.role.id
        })
      )
      this.setState({
        activeData: activeData
      })
    }
  }

  onDataUpdate(data) {
    this.props.dispatch(
      PropertyUserAction.editCorpDataAsync(data)
    )
    this.$modalEdit.modal("hide");
  }

  onRoleEditClick(data) {
    this.setState({
      activeData: data
    })
    this.$modalUserRole.modal("show")
  }

  onEditClick(data) {
    this.setState({
      activeData: data
    })
    this.$modalEdit.modal("show")
  }

  onDeleteClick(data) {
    var param = {
      id: data.id
    }
    this.props.dispatch(
      PropertyUserAction.deleteCorpDataAsync(param)
    )
  }

  onCreatePropertyClick() {
    this.$modalProperty.modal("show");
  }

  onCreateRoleClick() {
    this.$modalRole.modal("show");
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      PropertyUserAction.loadCorpDataAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit,
        username: self.state.search
      })
    )
  }

  onDataSearch(text) {
    var self = this;

    this.props.dispatch(
      PropertyUserAction.loadCorpDataAsync({
        offset: self.props.offset,
        limit: self.props.limit,
        username: text
      })
    )
    this.setState({
      search: text
    })
  }


  render() {
    var self = this;
    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="content-body demo-content-body" >
      <BackgroundSettingTools
        onDataSearch = {this.onDataSearch.bind(self)}
        onCreateClick={this.onCreateClick.bind(self)}/>
      <BackgroundSettingList
        data = {this.props.data}
        onRoleEditClick = {this.onRoleEditClick.bind(self)}
        onDeleteClick = {this.onDeleteClick.bind(self)}
        onEditClick = {this.onEditClick.bind(self)}/>
      <Paging
        current = {current}
        count = {count}
        limit = {limit}
        onPageChange = {this.onPageChange.bind(self)}
      />
      <BackgroundSettingCreate
        ref = "BackgroundPropertySettingCreate"
        data = {this.state.activeData}
        onDataCreate = {this.onDataCreate.bind(self)}
        onCreatePropertyClick = {this.onCreatePropertyClick.bind(self)}
        onCreateRoleClick = {this.onCreateRoleClick.bind(self)}/>
      <BackgroundSettingEdit
        ref = "BackgroundPropertySettingEdit"
        data = {this.state.activeData}
        onDataUpdate = {this.onDataUpdate.bind(self)}
        onCreatePropertyClick = {this.onCreatePropertyClick.bind(self)}
        />
      <BackgroundSettingProperty
        ref = "BackgroundSettingProperty"
        onSelectClick = {this.onSelectClick.bind(self)}/>
      <BackgroundSettingUserRole
        ref = "BackgroundSettingUserRole"
        data = {this.state.activeData}
        onDeleteSysRoleClick = {this.onDeleteSysRoleClick.bind(self)}
        onCreateRoleClick = {this.onCreateRoleClick.bind(self)}
      />
      <BackgroundSettingRole
        ref = "BackgroundPropertySettingRole"
        onDataUpdate = {this.onDataUpdate.bind(self)}
        onSelectRoleClick = {this.onSelectRoleClick.bind(self)}/>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  // console.log(state.corpUsers)
  return {
    data: state.corpUsers.data,
    offset: state.corpUsers.offset,
    limit: state.corpUsers.limit,
    count: state.corpUsers.count
  }
}

export default connect(mapStateToProps)(BackgroundSettingBody);
